<template>
  <!-- 缺省页组件 -->
  <view class="content">
    <defaultPage v-if="orders.length === 0" :content="content" />
    <orderNav v-else :orders="orders" />
  </view>
</template>
<script>
import { getOrderTicketList } from '@api/order'
import { getInit } from '@api/user'

import defaultPage from '@com/default'
import orderNav from '@com/mine/orderNav'
export default {
  components: {
    defaultPage,
    orderNav
  },
  data() {
    return {
      orders: [],
      page: 1,
      isShow: false
    }
  },
  computed: {
    content() {
      const data = {
        url: '../static/image/default/order_list.png',
        text: '您没有任何订单信息。',
        button: {
          display: false,
          text: ''
        }
      }
      return data
    }
  },
  created() {
    const query = { page: 1, limit: 10 }
    getOrderTicketList(query).then((res) => {
      this.orders = res.data.data.data
    })
    getInit()
  },
  onReachBottom() {
    if (!this.isShow) {
      this.page = this.page + 1
      const query = { page: this.page, limit: 10 }
      getOrderTicketList(query).then((res) => {
        this.orders = this.orders.concat(res.data.data.data)
      })
    }
  },
  onShow() {
    if (this.isShow) {
      uni.pageScrollTo({
        scrollTop: 0, duration: 0
      })
      this.isShow = false
      this.page = 1
      const query = { page: 1, limit: 10 }
      getOrderTicketList(query).then((res) => {
        this.orders = res.data.data.data
      })
      console.log(322)
    }
  },
  onHide() {
    console.log(3)
    this.isShow = true
  },
  onPullDownRefresh() {
    this.page = 1
    const query = { page: 1, limit: 10 }
    getOrderTicketList(query).then((res) => {
      this.orders = res.data.data.data
      uni.stopPullDownRefresh()
    })
  }
}
</script>
<style></style>
